<template>
    <div class="ml-[73px] flex items-center">
            <div class="w-[84px] h-[56px] mr-[21px]">
                <img v-if="type == 1" class="w-[84px] h-[56px]" src="../assets/22.png" alt="">
                <img v-if="type == 2" class="w-[84px] h-[56px]" src="../assets/26.png" alt="">
                <img v-if="type == 3" class="w-[84px] h-[56px]" src="../assets/25.png" alt="">

            </div>
            <div class="flex flex-col justify-start">


              <div class="flex items-center relative mt-[-12px]">
                <div class="text-[16px]">{{ title }}</div>
                <div :style="'left:'+value" class="text-[20px] top-0  absolute">{{ num }}</div>
                <div class="text-[20px] ml-auto">{{ value }}</div>
              </div>

            <div class="flex items-center">
             
             <div><img class="w-[6px] h-[10px]" src="../assets/23.png" alt=""></div>
             <div class="ml-[7px] relative w-[321px]  h-[12px]">
                 <div class="w-full h-full"  style="background-color: #11294a;"></div>
                 <div class="absolute left-0 top-[0px]  bottom-[0px] right-[0] z-8 flex items-center">
                     <div  style="transition: width 2s" class="bg-24 h-[10px] w-[0px]"></div>
                     <div class="absolute w-[6px] h-[6px] bottom-[-7px]" :style="'left:'+value">
                       <img src="../assets/24.png" alt="">
                     </div>
                 </div>
                 
                 <div class="absolute left-0 top-[0px]  bottom-0 right-[0] z-9 flex justify-end flex items-center" >
                     <div :style="'width:'+leftValue"  class="h-[12px]" style="background-color: #11294a;border: 1px solid #021a33;"></div>
                 </div>
                 
                 <div class="w-[7px] absolute top-0 h-[14px] z-10 left-[34px]" style="background-color: #01142d;"></div>
                 <div class="w-[7px] absolute top-0 h-[14px] z-10 left-[75px]" style="background-color: #01142d;"></div>
                 <div class="w-[7px] absolute top-0 h-[14px] z-10 left-[115px]" style="background-color: #01142d;"></div>
                 <div class="w-[7px] absolute top-0 h-[14px] z-10 left-[156px]" style="background-color: #01142d;"></div>
                 <div class="w-[7px] absolute top-0 h-[14px] z-10 left-[197px]" style="background-color: #01142d;"></div>
                 <div class="w-[7px] absolute top-0 h-[14px] z-10 left-[238px]" style="background-color: #01142d;"></div>
                 <div class="w-[7px] absolute top-0 h-[14px] z-10 left-[279px]" style="background-color: #01142d;"></div>
             </div>
         </div>


            </div>
     
        </div>
  </template>
  
  <script>
  export default {
    name: 'Line',
    props: ['type','title','value','leftValue','num'],

  }
  </script>
  
  <style scoped>
    .bg-24{
    background:linear-gradient(to right,#0f2343,#0b70a3,#08cff1,#e8f9ff);
    animation: growWidth 2s forwards infinite;
  }
  @keyframes growWidth {
    from {width: 0px;}
    to {width: 100%;}
  }
  </style>
  